<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
    <!--fixed remove-->
    <section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
    <section class="register_page">
        <div class="header"><span class="header_logo"></span></div>
        <div class="member_info">
            <p class="title">激活立享会员特权</p>
            <p class="sub_title"><span>会员章程</span></p>
            <div class="form_info">
                <p>会员信息</p>
                <div class="form_group">
                    <span class="form_control">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
                    <input type="text" class="w270" id="username" name="u_name" >
                </div>
                <div class="form_group">
                    <span class="form_control">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</span>
                    <input type="text" class="w270" id="mobile" name="u_mobile">
                    <input type='button' class="send_code" value="获取验证码">
                </div>
                <div class="form_group">
                    <span class="form_control">验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
                    <input type="text" class="w270" id="code" name="u_code" >
                </div>
                <div class="form_group">
                    <span class="form_control">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                    <!--生日年月日-->
                    <div id="myBirthday" class="box">
                        <select name="year"></select>
                        <select name="month"></select>
                        <select name="day">
                            <option value="0">日</option>
                        </select>
                    </div>
                </div>
                <p class="hot">*生日信息一经提交,不可修改哦~</p>
                <div class="form_group gendar_1">
                    <span class="form_control">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                    <label for="male" class="ordinary ordinary_focus"><input type="radio" name="gender" id="male" value="男">男</label>
                    <label for="female" class="ordinary"><input type="radio" name="gender" id="female" value="女">女</label>
                </div>
                <div class="form_group">
                    <span class="form_control">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>
                    <div id="city" class="l_city">
                        <select class="prov item_ele"></select>
                        <select class="city item_ele" disabled="disabled"></select>
                        <select class="dist item_ele" disabled="disabled"></select>
                    </div>
                </div>
                <div id="babyInfo">
                    <div name="baby_1">
                        <div class='form_group'>
                            <label class='form_control'>宝宝姓名</label>
                            <input type='text' class='w270' name='u_name_baby' >
                        </div>
                        <div class='form_group gendar_2'>
                            <span class='form_control'>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                            <label class='ordinary ordinary_focus'><input type='radio' name='gender' value='男'>男</label>
                            <label class='ordinary'><input type='radio' name='gender' value='女'>女</label>
                        </div>
                        <div class='form_group'>
                            <label class='form_control'>宝宝生日</label>
                            <!--生日年月日-->
                            <div name='babyBirthday' class='box'>
                                <select name='year'></select>
                                <select name='month'></select>
                                <select name='day'>
                                    <option value='0'>日</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="addBaby">+增加一个宝贝</span>
                <div class="agreement">
                    <span id="gouBg" class="gou_bg"></span>
                    <span>我已阅读并同意<em class="rule_btn">会员章程</em>和<em class="policy_btn">隐私政策</em></span>
                </div>
                <div class="form_btn">
                    <span class="tj_btn">提交</span>
                </div>

                <!--添加一个宝宝弹层-->
                <div class="addBaby_pop dno">
                    <div class="inner_bg">
                        <span class="close"></span>
                        <div class="baby_info">
                            <div class="form_group">
                                <label class="form_control">宝宝姓名</label>
                                <input type="text" class="w270" id="username_baby2" name="u_name_baby2" >
                            </div>
                            <div class="form_group gendar_3">
                                <span class="form_control">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                                <label for="c_male" class="ordinary ordinary_focus"><input type="radio" name="b_gender" id="c_male" value="男">男</label>
                                <label for="c_female" class="ordinary"><input type="radio" name="b_gender" id="c_female" value="女">女</label>
                            </div>
                            <div class="form_group">
                                <label class="form_control">宝宝生日</label>
                                <!--生日年月日-->
                                <div id="box_c" class="box">
                                    <select name="sel1_c" id="sel1_c">
                                        <option value="year">年</option>
                                    </select>
                                    <select name="sel2_c" id="sel2_c">
                                        <option value="month">月</option>
                                    </select>
                                    <select name="sel3_c" id="sel3_c">
                                        <option value="day">日</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <span class="tj_btn">确定</span>
                    </div>
                </div>
                <!--添加一个宝宝弹层结束-->
            </div>
        </div>
    </section>
    <div class="pop_item pop_success dno">
        <div class="wrap_item_pop">
            <span class="close"></span>
            <div class="inner_pop">
                <img src="img/ewm.jpg" class="ewm">
            </div>
        </div>
    </div>
    <div class="pop_item rules_page dno">会员章程</div>
    <div class="pop_item policy_page dno">隐私政策</div>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery.cityselect.js"></script>
<script src="js/common.js"></script>
<script src="js/date.selector.js"></script>
<script>
    var currentBabyNo = 1;
    function initDateSelector(selectParentIdName){
        _year = $("#" + selectParentIdName + " select[name='year']");
        _month = $("#" + selectParentIdName + " select[name='month']");
        _day = $("#" + selectParentIdName + " select[name='day']");
        dateSelector.init(_year, _month, _day);
    }
    initDateSelector("myBirthday");
    initDateSelector("babyInfo div[name='baby_1'] div[name='babyBirthday']");
    dateSelector.init($("#sel1_c"), $("#sel2_c"), $("#sel3_c"));

    //$("#babyInfo").html();

    /**
     * 城市三级联动
     */
    function citySelect(){
        $("#city").citySelect({
            url:"js/city.min.js",
            nodata: "none",
            required: false,
        });
    }
    citySelect();

    function initGenderEvent(){
        $('input[name="gender"]').on('click',function(){
            $(this).parents('.form_group').find('.ordinary').removeClass('ordinary_focus');
            $(this).parent().addClass('ordinary_focus')
        });

        $('input[name="b_gender"]').on('click',function(){
            $(this).parents('.form_group').find('.ordinary').removeClass('ordinary_focus');
            $(this).parent().addClass('ordinary_focus')
        });
    }
    initGenderEvent();
    

    /**
     * 关闭注册成功页面
     */
    function closePopSuccess(){
        $(".pop_success").fadeOut();
    }
    $(".pop_success .close").on('click',closePopSuccess);

    /**
     * 显示添加宝宝弹层
     */
    function showBabyPop(){
        $('#username_baby2').val("");
        $('#sel1_c').val("0");
        $('#sel2_c').val("0");
        $('#sel3_c').val("0");
        $(".addBaby_pop").fadeIn();
    }

    /**
     * 显示添加宝宝弹层
     */
    function hideBabyPop(){
        $(".addBaby_pop").fadeOut();
    }

    $(".addBaby_pop .close").on('click',hideBabyPop);
    $(".form_info .addBaby").on('click',showBabyPop);

    /**
     * 验证码部分
     */
    $(".send_code").on('click',function () {
        countdown(this)
    });

    function countdown(self){
        var mobile = $('#mobile').val();
        var regx = /^1\d{10}$/;
        if(!regx.test(mobile)){
            alert('请输入正确的手机号码');
            return false;
        }else {
            $(self).attr('disabled','disabled');
            $(self).css('backgroundColor','#ccc');
            var time = 60;
            $(self).val(time + 's');
            var timer = setInterval(function(){
                time--;
                if(time==0){
                    $(self).val('发送验证码');
                    $(self).removeAttr('disabled');
                    $(self).css('backgroundColor','#00af4e');
                    clearInterval(timer);
                    return false;
                }
                $('.send_code').val(time + 's');
            },1000);

            $.ajax({
                type:"POST",
                url:"lib/sms.php",
                data:{u_mobile:mobile},
                dataType:"json",
                success:function(data){
                    alert(data.errMsg);
                }
            });
        }
    }


    /*
        添加一个宝宝信息资料
     */
    function addBabyInfo(){
        if (!checkTable()) {
            return false;
        }
        var username_baby2 = $.trim($('#username_baby2').val());
        var gendar_3 = $(".gendar_3 .ordinary_focus input").val();
        var sel1_c = $.trim($('#sel1_c').val());
        var sel2_c = $.trim($('#sel2_c').val());
        var sel3_c = $.trim($('#sel3_c').val());
        //关闭弹层,将弹层中的内容追加
        hideBabyPop();
        var babyInfoHtml = $("#babyInfo div[name='baby_1']").html();
        $("#babyInfo").append("<div name='baby_"+(++currentBabyNo)+"' class='baby_item'>"+babyInfoHtml+"<span class='close' onclick='deleteElement(this);'></span></div>" );
        var newBabyHtml = $("#babyInfo div[name='baby_"+currentBabyNo+"']");
        console.log(newBabyHtml);
        initGenderEvent();
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] input[name='u_name_baby']").val(username_baby2);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] input[value='"+gendar_3+"']").trigger("click")
        initDateSelector("babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday']");
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='year']").val(sel1_c);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='month']").val(sel2_c);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='day']").val(sel3_c);
        console.log("day is " + sel3_c);
    }
    $(".addBaby_pop .tj_btn").on('click',addBabyInfo);
    function checkTable() {
        if ($('#username_baby2').val() == '') {
            alert("请输入宝宝姓名");
            return false;
        }
        if($("#sel1_c option:selected").val() == 0 || $("#sel2_c option:selected").val() == 0 || $("#sel3_c option:selected").val() == 0 ){
            alert('请输入完整的宝宝生日年月日');
            return false;
        }
        return true;
    }

    /**
     * 注册
     */
    function registerFn(){
        if (!checkTable2()) {
            return false;
        }
        var u_name = $.trim($('#username').val());
        var u_mobile = $.trim($('#mobile').val());
        var u_code = $.trim($('#code').val());
//        var sel1 = $.trim($('#sel1').val());
//        var sel2 = $.trim($('#sel2').val());
//        var sel3 = $.trim($('#sel3').val());
        var gendar_1 = $(".gendar_1 .ordinary_focus input").val();
        var u_province = $.trim($('.prov').val());
        var u_city = $.trim($('.city').val());
        var u_dis = $.trim($('.dist').val());
        var username_baby = $.trim($('#username_baby').val());
        var gendar_2 = $(".gendar_2 .ordinary_focus input").val();

        console.log('父母的信息姓名' + u_name +'手机号' + u_mobile + '验证码' + u_code +  '性别' + gendar_1 +'省市区' + u_province + u_city +u_dis + '宝宝信息姓名:' + username_baby + gendar_2);
    }
    $(".form_btn .tj_btn").on('click',registerFn);

    var bool=true;
    function checkTable2(){
        if ($('#username').val() == '') {
            alert("请输入您的姓名");
            return false;
        }
        var tel = $('#mobile').val();
        var regx = /^1\d{10}$/;
        if (!regx.test(tel)) {
            alert('请输入正确您的手机号');
            return false;
        }
        if($('#code').val() == ''){
            alert('验证码不能为空');
            return false;
        }
//        if($("#sel1 option:selected").val() == 'year' || $("#sel2 option:selected").val() == 'month' || $("#sel3 option:selected").val() == 'day' ){
//            alert('请输入您的完整生日年月日');
//            return false;
//        }
        if($(".prov option:selected").val() == '' || $(".city option:selected").val() == '' || $(".dist option:selected").val() == ''){
            alert('请输入完整省市区地址');
            return false;
        }
        if($("#username_baby").val() == ''){
            alert("请输入宝宝姓名");
            return false;
        }
//        if($("#sel1_b option:selected").val() == 'year' || $("#sel2_b option:selected").val() == 'month' || $("#sel3_b option:selected").val() == 'day' ){
//            alert('请输入宝宝完整生日年月日');
//            return false;
//        }
        if(!bool){
            alert('请同意并勾选会员章程和隐私政策');
            return false;
        }
            return true;
    }


    /**
     * 关闭打开会员章程
     * @constructor
     */
    function OpenRulesPage(){
        $(".rules_page").fadeIn();
    }
    function CloseRulesPage(){
        $(".rules_page").fadeOut();
    }

    $(".rules_page .close").on('click',CloseRulesPage);
    $(".register_page .rule_btn").on('click',OpenRulesPage);


    /**
     * 关闭打开隐私政策
     * @constructor
     */
    function OpenPolicyPage(){
        $(".policy_page").fadeIn();
    }
    function ClosePolicyPage(){
        $(".policy_page").fadeOut();
    }
    $(".policy_page .close").on('click',ClosePolicyPage);
    $(".register_page .policy_btn").on('click',OpenPolicyPage);


    /**
     * 删除添加的宝宝整条信息
     */
    function deleteElement(Obj){
        Obj.parentNode.parentNode.removeChild(Obj.parentNode);
    }


</script>
</html>